<div class="card-container">
  <md-card x-large class="sample-content">Your Content Here</md-card>
  <md-card>
    For hot module reloading run
    <pre>npm run start:hmr</pre>
  </md-card>
  <md-card>
    <md-card-title>Local State</md-card-title>
    <md-card-content>

      <form (ngSubmit)="submitState(localState.value)" autocomplete="off">

        <md-input
          placeholder="Submit Local State to App State"
          [value]="localState.value"
          (input)="localState.value = $event.target.value"
          autofocus>
        </md-input>

        <button md-raised-button color="primary">Submit Value</button>
      </form>
      <!--
        <input type="text" [value]="localState.value" (input)="localState.value = $event.target.value" autofocus>
        Rather than wiring up two-way data-binding ourselves with [value] and (input)
        we can use Angular's [(ngModel)] syntax
        <input type="text" name="textInput" [(ngModel)]="localState.value" autofocus>
      -->

      <pre>this.localState = {{ localState | json }}</pre>

    </md-card-content>
  </md-card>

</div>
